<template>
  <div>
    <el-form
      ref="updateForms"
      inline
      label-width="120px"
      class="queryParams"
      :model="updateForm"
      :loading="loading"
    >
      <el-row>
        <el-col :span="24">
          <el-row>
            <el-col :span="24">
              <div>基本信息</div>
            </el-col>;
            <el-col :span="24">
              <el-form-item label="客户单号" prop="orderNo">
                <el-input
                  v-model="updateForm.waybillNo"
                 
                  readonly
                ></el-input>
              </el-form-item>
              <el-form-item label="系统订单号" prop="orderNo">
                <el-input
                  v-model="updateForm.orderNo"
                
                  readonly
                ></el-input>
              </el-form-item>
              <el-form-item label="报价类型" prop="quotationType">
                <el-select v-model="updateForm.quotationType" disabled>
                  <el-option
                    v-for="dict in dicts[DictDirection.报价类型]"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
              <!-- <el-form-item v-if="updateForm.quotationType != '3'" :label="quotationTitle" prop="customPrice">
                <el-input v-model="updateForm.customPrice" readonly></el-input>
              </el-form-item>  -->
              <el-form-item label="订单状态：" prop="splittingStatus">
                <el-select v-model="updateForm.splittingStatus" disabled>
                  <el-option
                    v-for="dict in dicts[DictDirection.包裹状态]"
                    :key="dict.dictValue"
                    :label="dict.dictLabel"
                    :value="dict.dictValue"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="备注：" prop="remarks">
                <el-input
                  v-model="updateForm.remarks"
                  readonly
                  type="textarea"
                ></el-input>
              </el-form-item>
              <el-divider></el-divider>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="24">
          <el-row>
            <el-col :span="24">
              <el-row>
                <el-col :span="24">收货信息</el-col>
                <el-col :span="24">
                  <el-form-item label="客户简称" prop="customerName">
                    <el-select
                      v-model="updateForm.customerName"
                      filterable
                      disabled
                      placeholder="请选择客户"
                      clearable
                    >
                      <el-option
                        v-for="dict in dicts[DictDirection.客户]"
                        :key="dict.customerCode"
                        :label="dict.customerName"
                        :value="dict.customerCode"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="销售产品：" prop="marketProducts">
                    <el-select
                      v-model="updateForm.marketProducts"
                      disabled
                      placeholder="请选择销售产品"
                    >
                      <el-option
                        v-for="dict in dicts[DictDirection.产品]"
                        :key="dict.salesProductCode"
                        :label="dict.salesProductName"
                        :value="dict.salesProductCode"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="收货类型：" prop="goodsType">
                    <el-select v-model="updateForm.goodsType" disabled>
                      <el-option
                        v-for="dict in dicts[DictDirection.货物类型]"
                        :key="dict.dictValue"
                        :label="dict.dictLabel"
                        :value="dict.dictValue"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                 
                  <el-form-item label="总计实重：" prop="receivingTotalWeight">
                    <el-input v-model="updateForm.receivingTotalWeight" readonly></el-input>
                  </el-form-item>
                  <el-form-item label="总体积重：" prop="receivingTotalWood">
                    <el-input v-model="updateForm.receivingTotalWood" readonly></el-input>
                  </el-form-item>
                  <el-form-item label="总计费重：" prop="receivingTotalCharging">
                    <el-input v-model="updateForm.receivingTotalCharging" readonly></el-input>
                  </el-form-item>
                  <el-form-item label="总件数：" prop="receivingTotal">
                    <el-input v-model="updateForm.receivingTotal" readonly></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-divider></el-divider>
            </el-col>
          </el-row>
          <el-divider></el-divider>
        </el-col>
        <el-col :span="24">
          <el-row>
            <el-col :span="12">
              <el-row>
                <el-col :span="24">收件人信息</el-col>
                <el-col :span="24">
                  <el-form-item label="国家：" prop="consigneeCountry">
                    <el-select
                      v-model="updateForm.consigneeCountry"
                      filterable
                      :disabled="true" 
                    
                      placeholder="请输入内容"
                    >
                      <el-option
                        v-for="dict in dicts[DictDirection.国家]"
                        :key="dict.countryCode"
                        :label="dict.countryChName"
                        :value="dict.countryCode"
                      ></el-option>
                    </el-select>
                  </el-form-item>
                  <el-form-item label="姓名：" prop="consigneeName">
                    <el-input v-model="updateForm.consigneeName" readonly></el-input>
                  </el-form-item>
                  <el-form-item label="邮编：" prop="consigneePostcode">
                    <el-input v-model.trim="updateForm.consigneePostcode" readonly></el-input>
                  </el-form-item>
                  <el-form-item label="公司：" prop="consigneeCompany">
                    <el-input v-model="updateForm.consigneeCompany" readonly></el-input>
                  </el-form-item>
                  <el-form-item label="城市：" prop="consigneeCity">
                    <el-input
                      v-model="updateForm.consigneeCity"
                      readonly
                      @blur="updateForm.consigneeCity = updateForm.consigneeCity.toString().trim()"
                    ></el-input>
                  </el-form-item>
                  <el-form-item label="省州：" prop="consigneeCountry">
                    <el-input v-model="updateForm.consigneeCountry" readonly></el-input>
                  </el-form-item>
                  <el-form-item label="电话：" prop="consigneeTel">
                    <el-input v-model="updateForm.consigneeTel" readonly></el-input>
                  </el-form-item>
                  <el-form-item label="地址1：" prop="consigneeAddress">
                    <el-input v-model="updateForm.consigneeAddress" readonly></el-input>
                  </el-form-item>
                  <el-form-item label="地址2：" prop="consigneeAddress2">
                    <el-input v-model="updateForm.consigneeAddress2" readonly></el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
          <el-divider></el-divider>
        </el-col>

        <el-col :span="24">
          <el-row>
            <el-col>包裹信息</el-col>
          </el-row>
          <el-table
            :data="updateForm.receivingWoodInfo"
            height="400"
            border
          >
            <el-table-column
              label="序号"
              align="center"
              type="index"
              width="50"
            ></el-table-column>
            <el-table-column label="长(cm)" align="center">
              <template #default="{ row }">
                <el-form-item label-width="0">
                  <el-input-number
                    v-model="row.length"
                    style="width: 100%;"
                    disabled
                    :controls="false"
                    :min="0"
                  ></el-input-number>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="宽(cm)" align="center">
              <template #default="{ row }">
                <el-form-item label-width="0">
                  <el-input-number
                    v-model="row.widht"
                    :controls="false"
                    style="width: 100%;"
                    disabled
                    :min="0"
                  ></el-input-number>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="高(cm)" align="center">
              <template #default="{ row }">
                <el-form-item label-width="0">
                  <el-input-number
                    v-model="row.height"
                    :controls="false"
                    disabled
                    style="width: 100%;"
                    :min="0"
                  ></el-input-number>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="重(kg)" align="center">
              <template #default="{ row }">
                <el-form-item label-width="0">
                  <el-input-number
                    v-model="row.weight"
                    :controls="false"
                    disabled
                    style="width: 100%;"
                    :min="0"
                    :max="66"
                  ></el-input-number>
                </el-form-item>
              </template>
            </el-table-column>
            <el-table-column label="件数" align="center">
              <template #default="{ row }">
                <el-form-item label-width="0">
                  <el-input-number
                    v-model="row.pieceNumber"
                    :controls="false"
                    disabled
                    style="width: 100%;"
                    :min="0"
                  ></el-input-number>
                </el-form-item>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>
<script lang="ts" setup>
import { ref, defineExpose, getCurrentInstance } from 'vue'
import { ElMessage } from 'element-plus'
import useDicts, { DictDirection } from '@/store/modules/dicts'
import { getEndList } from '@/api/expressManager/terminal'

const dicts = useDicts()
dicts.setDicts(DictDirection.报价类型)
dicts.setDicts(DictDirection.货物类型)
dicts.setDicts(DictDirection.产品)
dicts.setDicts(DictDirection.客户)
dicts.setDicts(DictDirection.国家)
dicts.setDicts(DictDirection.包裹状态)
const updateForm = ref({
  waybillNo: '',
  orderNo: '',
  quotationType: '',
  customPrice: '',
  splittingStatus: '',
  remarks: '',
  customerName: '',
  marketProducts: '',
  goodsType: '',
  receivingTotalWeight: '',
  receivingTotalWood: '',
  receivingTotalCharging: '',
  receivingTotal: '',
  consigneeCountry: '',
  consigneeName: '',
  consigneePostcode: '',
  consigneeCompany: '',
  consigneeCity: '',
  consigneeTel: '',
  consigneeAddress: '',
  consigneeAddress2: '',
  receivingWoodInfo: [{ length: '', widht: '', height: '', weight: '', pieceNumber: '' }],
})
const updateForms = ref(undefined)
const loading = ref(false)
const idss = ref(undefined)
const { proxy } = getCurrentInstance() as any
// const quotationTitle = ref(null)
const getList = () => {
  loading.value = true
  console.log(idss.value)
  const id = idss.value
  getEndList(id).then(res => {
    if (res.code == 200) {
      loading.value = false
      proxy.updateForm = res.data
      res.data.receivingWoodInfo = JSON.parse(res.data.receivingWoodInfo)
      ElMessage.success('加载成功')
    } else {
      ElMessage.error(res.msg)
      loading.value = false
    }
  })
}

defineExpose({
  getList,
  idss,
})
</script>
<style lang="less" scoped>
/deep/.el-form-item__content {
  width: 200px;
}
  </style>